<template>
  <div class="header">
    <el-icon v-if="!isFold" :size="26" class="fold-menu" @click="foldMenus">
      <Fold />
    </el-icon>
    <el-icon v-else :size="26" class="fold-menu" @click="foldMenus">
      <Expand />
    </el-icon>
    <div class="content">
      <Breadcrumb :breadcrumbs="breadcrumbs" />
      <div class="user-info"><UserInfo /></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { Fold, Expand } from '@element-plus/icons-vue'
import UserInfo from './user-info.vue'
import Breadcrumb from '@/base-ui/breadcrumb'
// import { IBreadcrumb } from '@/base-ui/breadcrumb/types'
import { pathMapToBreadcrumb } from '@/utils/map-menu'
const emit = defineEmits(['handleFoldClick'])

const isFold = ref(false)
const foldMenus = () => {
  isFold.value = !isFold.value
  emit('handleFoldClick', isFold.value)
}

const store = useStore()
const route = useRoute()
// 面包屑数据： [{}, {}]
const breadcrumbs = computed(() => {
  // 动态更新
  const currentPath = route.path
  const userMenus = store.state.login.userMenus
  return pathMapToBreadcrumb(userMenus, currentPath)
})
</script>

<style scoped lang="less">
.header {
  display: flex;
  width: 100%;
  align-items: center;
  .fold-menu {
    cursor: pointer;
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px;
  }
}
</style>
